<template>
  <div class="baseConfig">
    <!-- <el-divider></el-divider> -->
    <DividerTile title="基本信息" :isShow.sync="isShow"></DividerTile>
    <el-form :data="formData" label-width="90px" size="small" v-show="isShow">
      <el-form-item label="字段名">
        <el-input disabled v-model="formData.field" @input="valueChange($event, 'field')" placeholder="请输入字段名"></el-input>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="formData.label" @input="valueChange($event, 'label')" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="占位提示">
        <el-input v-model="formData.placeholder" @input="valueChange($event, 'placeholder')" placeholder="请输入占位提示"></el-input>
      </el-form-item>
      <el-form-item label="默认值">
        <div class="flex">
          <el-input v-model="formData.vModel" @input="valueChange($event, 'vModel')" placeholder="请输入默认值" :disabled="!formData.manualDefaults" class="flex1 mr-5"></el-input>
        <el-button @click="clearClick" type="primary" plain>清空</el-button>
        </div>
      </el-form-item>

      <!-- <el-form-item label="数据源">
        <el-select>
          <el-option></el-option>
        </el-select>
      </el-form-item> -->

      <el-form-item label="是否显示">
        <el-switch v-model="formData.isShow" @change="valueChange($event, 'isShow')">
        </el-switch>
      </el-form-item>
      <el-form-item label="是否必填">
        <el-switch v-model="formData.required" @change="valueChange($event, 'required')">
        </el-switch>
      </el-form-item>
      <el-form-item label="是否禁用">
        <el-switch v-model="formData.disabled" @change="valueChange($event, 'disabled')">
        </el-switch>
      </el-form-item>
      <el-form-item label="是否只读">
        <el-switch v-model="formData.readonly" @change="valueChange($event, 'readonly')">
        </el-switch>
      </el-form-item>
    </el-form>


  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
import DividerTile from '../../dividerTile'
export default {
  name: 'baseConfig',
  components: {
    DividerTile
  },
  data() {
    return {
      isShow: true
    }
  },
  computed: {
    ...mapState('pageData', ['activeFormData']),
    ...mapGetters('pageData', ['activeId']),
    formData() {
      if (this.activeFormData) {
        const { field = '', label = '', placeholder = '', vModel = '', isShow = false, required = false, disabled = false, readonly = false, manualDefaults = true } = this.activeFormData
        return {
          field,
          label,
          placeholder,
          vModel,
          isShow,
          required,
          disabled,
          readonly,
          manualDefaults
        }
      } else {
        return this.formDataInit()
      }
    }
  },
  watch: {},
  mounted() {},
  methods: {
    ...mapMutations('pageData', ['SETPROP']),
    formDataInit() {
      return {
        field: '',
        label: '',
        placeholder: '',
        defaultValue: '',
        required: false,
        disabled: false,
        readonly: false
      }
    },
    clearClick() {
      // 如果是开关的时候，默认值为false字符串
      this.SETPROP({
        value: this.activeFormData.tag === 'van-switch' ? 'false' : '',
        key: 'vModel'
      })
    },

    valueChange(value, key) {
      this.SETPROP({
        value,
        key
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.baseConfig {
  padding-right: 10px;
}
</style>
